import * as d3 from 'd3'

const dataset = [5, 10, 15, 20, 25, 19, 13]
// drawBars(dataset)
drawTimeline()

async function drawTimeline() {
  const w = 500
  const h = 400
  const margin = 40

  const parseTime = d3.timeParse('%Y/%m/%d')
  const data = await d3.csv('./data/apples.csv', (d) => ({
    date: parseTime(d.DATE),
    price: parseFloat(d.PRICE),
  }))

  const tScale = d3
    .scaleTime()
    .domain([d3.min(data, (d) => d.date), d3.max(data, (d) => d.date)])
    .range([margin, w - margin])
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(data, (d) => d.price)])
    .range([h - margin, margin])

  const tAxis = d3.axisBottom().scale(tScale).ticks(5)

  const svg = d3.select('body').append('svg').attr('width', w).attr('height', h)
  svg
    .selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr('cx', (d) => tScale(d.date))
    .attr('cy', (d) => yScale(d.price))
    .attr('r', 5)
  svg
    .append('g')
    .attr('class', 'axis')
    .attr('transform', 'translate(0, ' + (h - margin) + ')')
    .call(tAxis)
}

function drawBars(dataset) {
  const w = 500
  const h = 200
  const padding = 1
  const barW = w / dataset.length - padding

  const svg = d3.select('body').append('svg').attr('width', w).attr('height', h)

  svg
    .selectAll('rect')
    .data(dataset)
    .enter()
    .append('rect')
    .attr('width', barW)
    .attr('height', (d) => d * 3)
    .attr('x', (d, i) => i * (barW + padding))
    .attr('y', (d) => h - d * 3)
    .attr('fill', 'teal')

  svg
    .selectAll('text')
    .data(dataset)
    .enter()
    .append('text')
    .text((d) => d)
    .attr('fill', 'white')
    .attr('x', (d, i) => i * (barW + padding) + barW / 2)
    .attr('y', (d) => h - d * 3 + 15)
    .attr('text-anchor', 'middle')
}
